<template>
  <div class="shopping-cart">
    <cart-header />
    <cart-item
      v-for="item in cartStore.cartItems"
      :key="item.id"
      :item="item"
    />
    <cart-footer />
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cart'
import CartHeader from './cart-header.vue'
import CartItem from './cart-item.vue'
import CartFooter from './cart-footer.vue'
import { onMounted } from 'vue'

const cartStore = useCartStore()

onMounted(() => {
  cartStore.getCartList()
})
</script>

<style scoped>
.shopping-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.cart-items {
  margin: 20px 0;
}
</style> 